<template>
  <div class="index">
    <b-modal ref="myWarning1" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>未搜索到满足条件专辑!</h4>
      </div>
    </b-modal>

    <b-modal ref="myWarning2" hide-footer title="提示">
      <div class="d-block text-center">
        <h4>搜索到满足条件专辑{{page_count}}张</h4>
      </div>
    </b-modal>

    <div class="top2"></div>
    <b-container>
      <div class="title" style="text-align: center">
        <h5 style="text-shadow: 2px 2px 8px #00FA9A;">
          筛选条件：
          <span v-if="rate_amg || rate_home || category1 || category2 || awards">
            <span v-if="rate_amg">AllMusic评级{{rate_amg}}星</span>
            <span v-if="rate_home"><span v-if="rate_amg">& </span>本站评级{{rate_home}}星</span>
            <span v-if="category1">
			<span v-if="rate_amg || rate_home">
              &
			</span>
			  <span v-for="item in options3" :key="item">
                <span v-if="item.value==category1">{{item.text}}</span>
              </span>
			</span>
            <span v-if="category2"><span v-if="rate_amg || rate_home || category1">& </span>{{dict_album[category2]}}</span>
            <span v-if="awards"><span v-if="rate_amg || rate_home || category1 || category2">& </span>{{awards}}</span>
          </span>
          <span v-else>无</span>
        </h5>
      </div>
      <br />
      <b-row class="mb-2" style="text-align: center; margin-left: 0px; margin-right: 0px">
        <!--<b-col cols="2" style="font-size: 12px;">只显示本站推荐专辑</b-col>-->
        <b-col
          cols="2"
          style="font-family: Tahoma, Arial; font-size: 12px; font-weight: 500; margin: 0 auto; padding: 0 10px 0 0"
        >
          <nobr>AllMusic评级</nobr>
        </b-col>
        <b-col
          cols="2"
          style="font-family: Tahoma, Arial; font-size: 12px; font-weight: 500; margin: 0 auto; padding: 0 10px 0 0"
        >本站评级</b-col>
        <b-col
          cols="2"
          style="font-family: Tahoma, Arial; font-size: 12px; font-weight: 500; margin: 0 auto; padding: 0 10px 0 0"
        >专辑风格</b-col>
        <b-col
          cols="2"
          style="font-family: Tahoma, Arial; font-size: 12px; font-weight: 500; margin: 0 auto; padding: 0 10px 0 0"
        >专辑类型</b-col>
        <b-col
          cols="2"
          style="font-family: Tahoma, Arial; font-size: 12px; font-weight: 500; margin: 0 auto; padding: 0 10px 0 0"
        >专辑荣誉</b-col>
        <b-col
          cols="1"
          style="font-family: Tahoma, Arial; font-size: 12px; font-weight: 500; margin: 0 auto; padding: 0 10px 0 0"
        ></b-col>
      </b-row>
      <b-row class="mb-2" style="text-align: center; margin-left: 0px; margin-right: 0px">
        <!--<b-col cols="2">
        <b-form-checkbox id="checkbox1"
                     v-model="choice"
                     value="recommend"
                     unchecked-value=""
                     style="margin: 4px 50px;">
        </b-form-checkbox>
        </b-col>-->
        <b-col cols="2" style="margin: 0 auto; padding: 0 10px 0 0">
          <b-form-select
            size="sm"
            v-model="rate_amg"
            :options="options1"
            class="mb-3"
            @change="searchAlbums($event)"
          />
        </b-col>
        <b-col cols="2" style="margin: 0 auto; padding: 0 10px 0 0">
          <b-form-select
            size="sm"
            v-model="rate_home"
            :options="options2"
            class="mb-3"
            @change="searchAlbums($event)"
          />
        </b-col>
        <b-col cols="2" style="margin: 0 auto; padding: 0 10px 0 0">
          <b-form-select
            size="sm"
            v-model="category1"
            :options="options3"
            class="mb-3"
            @change="searchAlbums($event)"
          />
        </b-col>
        <b-col cols="2" style="margin: 0 auto; padding: 0 10px 0 0">
          <b-form-select
            size="sm"
            v-model="category2"
            :options="options4"
            class="mb-3"
            @change="searchAlbums($event)"
          />
        </b-col>
        <b-col cols="2" style="margin: 0 auto; padding: 0 10px 0 0">
          <b-form-select
            size="sm"
            v-model="awards"
            :options="awardsList"
            class="mb-3"
            @change="searchAlbums($event)"
          />
        </b-col>
        <b-col cols="1" style="margin: 0 auto; padding: 0 10px 0 0">
          <b-button
            size="sm"
            @click.prevent="clearAlbums()"
            style="width: 80px;"
            variant="primary"
          >清空</b-button>
        </b-col>
      </b-row>
      <br />
      <b-table
        :striped="striped"
        :bordered="bordered"
        :outlined="outlined"
        :small="small"
        :hover="hover"
        :dark="dark"
        :fixed="fixed"
        :foot-clone="footClone"
        :head-variant="light"
        :items="albumList"
        :fields="fields"
        style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 12px; padding: 5px; background-color: rgba(0,0,0,0.8)"
        v-if="albumList.length > 0 & albumList[0] != 1"
      >
        <template v-slot:cell(recommend.img)="data">
          <span v-if="data.value">
            <img :src="`${data.value}`" alt style="width:35px; height:35px" />
          </span>
        </template>
        <template v-slot:cell(date)="data">
          <span v-if="data.value">{{data.value.substring(0,4)}}</span>
        </template>
        <template v-slot:cell(covernameartist)="data">
          <router-link target="_blank"
            :to="{path: '/artist/'+data.item.artist.alias+'/album', query: {name: `${data.item.alias}`}}"
          >
            <img :src="`${data.item.cover}`" title class="placeholder60"/>
          </router-link>
        </template>
        <template v-slot:cell(nameartist)="data">
          <router-link target="_blank"
            :to="{path: '/artist/'+data.item.artist.alias+'/album', query: {name: `${data.item.alias}`}}"
          >{{data.item.name | truncate}}</router-link>
        </template>
        <template v-slot:cell(artist)="data">
          <router-link target="_blank"
            :to="{path: '/artist/'+data.value.alias}"
          >{{data.value.name}}</router-link>
        </template>
        <template v-slot:cell(category2)="data">{{dict_album[data.value]}}</template>
        <template v-slot:cell(rating_amg.img)="data">
          <img :src="`${data.value}`" title style="width:70px" />
        </template>
        <template v-slot:cell(rating_home.img)="data">
          <img :src="`${data.value}`" title style="width:70px" />
        </template>
        <template v-slot:cell(review_length)="data">
          <img :src="url_review" title v-if="data.value" />
        </template>
      </b-table>
      <br />
      <div>
        <b-pagination
          v-model="page_current"
          :total-rows="page_count"
          :per-page="page_size"
          size="md"
        />
      </div>
      <br />
    </b-container>
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  async asyncData(context) {
    let [request1Data] = await Promise.all([
	  context.$axios.get('/api/list-awards/', { params: { showLoading: false } })
	]).catch(err => {
      console.log(err);
    });
    return {
	  awardsList: request1Data.data.results,
    };
  },
  data() {
    return {
      category: this.$route.query.category,
      input: '',
      artist: '',
      albumList: [],
      page_count: 0,
      page_current: 1,
      page_size: 20,
      fields: [
        {
          key: 'recommend.img',
          label: '推荐',
          class: 'text-center',
        },
        {
          key: 'date',
          label: '年份',
          sortable: true,
          class: 'text-center',
        },
        {
          key: 'covernameartist',
          label: '封面',
          class: 'text-center',
        },
        {
          key: 'nameartist',
          label: '专辑名称',
        },
        {
          key: 'artist',
          label: '艺人',
          sortable: true,
        },
        {
          key: 'category2',
          label: '类型',
          sortable: true,
          class: 'text-center',
        },
        {
          key: 'rating_amg.img',
          label: 'AllMusic评级',
        },
        {
          key: 'rating_home.img',
          label: '本站评级',
        },
        {
          key: 'review_length',
          label: '评论',
          class: 'text-center',
        },
      ],
      striped: false,
      bordered: false,
      outlined: false,
      small: true,
      hover: true,
      dark: true,
      fixed: false,
      footClone: false,
      light: 'light',
      rate_amg: null,
      rate_home: null,
      category1: null,
      category2: null,
      awards: '',
      url_review: require('@/assets/img/index/review.png'),
      paginate: ['searchresult'],
      options1: [
        { value: null, text: '---选择AllMusic评级---' },
        { value: 5, text: '5星' },
        { value: 4.5, text: '4½星' },
        { value: 4, text: '4星' },
        { value: 3.5, text: '3½星' },
        { value: 3, text: '3星' },
        { value: 2.5, text: '2½星' },
        { value: 2, text: '2星' },
        { value: 1.5, text: '1½星' },
        { value: 1, text: '1星' },
      ],
      options2: [
        { value: null, text: '---选择本站评级---' },
        { value: 5, text: '5星' },
        { value: 4.5, text: '4½星' },
        { value: 4, text: '4星' },
        { value: 3.5, text: '3½星' },
        { value: 3, text: '3星' },
        { value: 2.5, text: '2½星' },
        { value: 2, text: '2星' },
        { value: 1.5, text: '1½星' },
        { value: 1, text: '1星' },
      ],
      options3: [
        { value: null, text: '---选择专辑风格---' },
        { value: 'britpop', text: '英伦摇滚乐' },
        { value: 'classic', text: '经典老摇滚' },
		{ value: 'indie', text: '新生代独立音乐' },
        { value: 'electronic', text: '英国电子乐' },
        { value: 'female', text: '英伦玫瑰' },
        { value: 'male', text: '英伦男歌手' },
        { value: 'shoegaze', text: '自赏派音乐' },
        { value: 'scotland', text: '苏格兰流行乐' },
        { value: 'ireland', text: '爱尔兰流行乐' },
      ],
      options4: [
        { value: null, text: '---选择专辑类型---' },
        { value: 'studio', text: '录音室专辑' },
        { value: 'live', text: '现场专辑' },
        { value: 'compilation', text: '精选专辑' },
        { value: 'video', text: '录影带' },
      ],
      options5: [
        { value: null, text: '---选择专辑荣誉---' },
        { value: '滚石杂志史上最伟大的500张专辑', text: '滚石杂志史上最伟大的500张专辑' },
        { value: '有生之年必听的1001张专辑', text: '有生之年必听的1001张专辑' },
        { value: '英国水星音乐奖最佳专辑', text: '英国水星音乐奖最佳专辑' },
        { value: '全英音乐奖最佳专辑', text: '全英音乐奖最佳专辑' },
        { value: '香港MCB杂志100张史上最具革命性专辑', text: '香港MCB杂志100张史上最具革命性专辑' },
        { value: 'Pitchfork评选1960年代200张最佳专辑', text: 'Pitchfork评选1960年代200张最佳专辑' },
        { value: 'Pitchfork评选1970年代100张最佳专辑', text: 'Pitchfork评选1970年代100张最佳专辑' },
        { value: 'Pitchfork评选1980年代200张最佳专辑', text: 'Pitchfork评选1980年代200张最佳专辑' },
        { value: 'Pitchfork评选1990年代100张最佳专辑', text: 'Pitchfork评选1990年代100张最佳专辑' },
        { value: 'Pitchfork评选2000年代200张最佳专辑', text: 'Pitchfork评选2000年代200张最佳专辑' },
        { value: 'Pitchfork评选2010年代200张最佳专辑', text: 'Pitchfork评选2010年代200张最佳专辑' },
		{ value: 'Pitchfork评选自赏派风格50张最佳专辑', text: 'Pitchfork评选自赏派风格50张最佳专辑' },
		{ value: 'Pitchfork评选Britpop风格50张最佳专辑', text: 'Pitchfork评选Britpop风格50张最佳专辑' },
      ],
	  dict_album: { studio: '录音室专辑', live: '现场专辑', compilation: '精选专辑', ep: 'EP', single: '单曲', video: '录影带' },
    };
  },
  filters: {
      truncate: function(value) {
        if (value.length <= 48) {
		  return value;
		} else {
		  return value.substr(0, 48) + "...";
		}
      }
  },
  methods: {
    searchAlbums() {
      this.page_current = 1;
	  this.albumList = [];
      var params = {
        page: 1,
        rate_amg: this.rate_amg,
        rate_home: this.rate_home,
        category1: this.category1,
        category2: this.category2,
        awards: this.awards,
        showLoading: true,
      };
      this.$axios
        .get('/api/albums-advance/', { params: params })
        .then(response => {
          var res = response.data;
          this.page_count = res.count;
          if (res.count < 1) {
            this.albumList = [1];
            this.$refs.myWarning1.show();
            //this.albumList.splice(0,this.albumList.length)
            //setTimeout(() => {
            //  this.$router.go(0)
            //}, 2500);
          } else {
            this.albumList = res.results;
            this.$refs.myWarning2.show();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    clearAlbums() {
      this.page_current = 1;
      this.rate_amg = null;
      this.rate_home = null;
      this.category1 = null;
      this.category2 = null;
      this.awards = '';
      var params = {
        page: 1,
        rate_amg: this.rate_amg,
        rate_home: this.rate_home,
        category1: this.category1,
        category2: this.category2,
        awards: this.awards,
        showLoading: true,
      };
      this.$axios
        .get('/api/albums-advance/', { params: params })
        .then(response => {
          var res = response.data;
          this.page_count = res.count;
          if (res.count < 1) {
            this.albumList = [1];
            this.$refs.myWarning1.show();
            //this.albumList.splice(0,this.albumList.length)
            //setTimeout(() => {
            //  this.$router.go(0)
            //}, 2500);
          } else {
            this.albumList = res.results;
            this.$refs.myWarning2.show();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  head() {
    return {
      title: '高级搜索 | 英伦留声机',
    };
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    this.$route.meta.title = '高级搜索 | 英伦留声机';
    document.title = this.$route.meta.title;
    var params = {
      page: this.page_current,
      rate_amg: this.rate_amg,
      rate_home: this.rate_home,
      category1: this.category1,
      category2: this.category2,
      //awards: this.awards,
	  awards: this.$route.query.awards,
      showLoading: true,
    };
	if (this.$route.query.awards) {
		this.awards = this.$route.query.awards;
	}
    this.$axios
      .get('/api/albums-advance/', { params: params })
      .then(response => {
        var res = response.data;
        this.page_count = res.count;
        if (res.count < 1) {
          this.albumList = [1];
          this.$refs.myWarning1.show();
        } else {
          this.albumList = res.results;
        }
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  watch: {
    page_current: function() {
	  this.albumList = [];
      var params = {
        page: this.page_current,
        rate_amg: this.rate_amg,
        rate_home: this.rate_home,
        category1: this.category1,
        category2: this.category2,
        awards: this.awards,
        showLoading: true,
      };
      this.$axios
        .get('/api/albums-advance/', { params: params })
        .then(response => {
          var res = response.data;
          this.page_count = res.count;
          this.albumList = res.results;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
a.page-link {
  color: #222222;
  cursor: pointer;
}
a.page-link:hover {
  color: #999999;
  cursor: pointer;
}
a.page-link:active {
  color: #999999;
  cursor: pointer;
}
a.page-link:visited {
  color: #222222;
  cursor: pointer;
}

a:not([href]):not([tabindex]) {
  color: #222222;
}

.blank img {
  background: url(~@/assets/img/background/album_60x60.png) no-repeat center;
  content: '';
  height: 100%;
  width: 100%;
  position: relative;
  left: 0;
  top: 0;
}

.blank img:after {
  position: absolute;
}

.placeholder60 {
    width: 60px;
	min-height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(~@/assets/img/background/album_60x60.png);
}

</style>

<!--<style src="../assets/css/link.css"></style>-->
<!--<style src="../assets/css/font.css"></style>-->
<!--<style src="../assets/css/global.css"></style>-->

